<!-- 用户积分记录 -->
<template>
	<view class="container">
		<view class="menu-box">
			<view :class="active == index?'active':''" class="item" v-for="(item,index) in menu" :key="index" @tap="clickMenu(index,item)">{{item.title}}</view>
		</view>
		<view class="listBox">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="a">
					<text class="a-a">{{item.title}}</text>
					<text class="a-b">{{item.add_time}}</text>
				</view>
				<view class="b">
					<text class="b-a">{{active?'-':'+'}}{{item.number}}</text>
				</view>
			</view>
		</view>
		<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
	</view>
</template>

<script>
	import {
		signIntegralDetail
	} from "@/api/user.js"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				active: 0,
				menu: [
					{
						title: "收入",
						em: 1
					},
					{
						title: "支出",
						em: 0
					}
				],
				list: [],
				data: {
					em: 1,
					page: 1,
					limit: 15,
				},
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多记录"
				}
			}
		},
		onLoad(options) {
			this.getList()
		},
		onReachBottom() {
			if (this.loadStatus == "more")
				(this.loadStatus = "loading"), this.getList();
		},
		methods: {
			getList() {
				signIntegralDetail(this.data).then(res => {
					this.loadStatus = "more";
					this.list.push.apply(this.list, res.data);
					if (res.data.length < this.data.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.data.page = this.data.page + 1;
					if (this.list.length == 0) {
						this.contentText.contentnomore = '暂无数据'
					} else {
						this.contentText.contentnomore = '没有更多数据'
					}
				})
			},
			clickMenu(index,item) {
				this.active = index
				this.list = []
				this.data.em = item.em
				this.data.page = 1
				this.loadStatus = "loading"
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 30rpx;
		.menu-box{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			padding:0 80rpx;
			display: flex;
			background-color: #FFFFFF;
			.item{
				flex: 1;
				text-align: center;
				line-height: 100rpx;
				font-size: 32rpx;
				color: #999999;
			}
			.active{
				font-size: 32rpx;
				color: #333333;
				position: relative;
				&::after{
					content: "";
					position: absolute;
					left: 50%;
					bottom: 10rpx;
					margin-left: -30rpx;
					width: 60rpx;
					height: 4rpx;
					background: #57BE6A;
					border-radius: 2rpx;
				}
			}
		}
		.listBox {
			padding-top: 100rpx;
			.item {
				height: 124rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f5f5f5;

				.a {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.a-a{
						font-size: 28rpx;
						color: #333333;
					}
					.a-b{
						margin-top: 8rpx;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.b{
					font-size: 36rpx;
					font-weight: bold;
					color: #FDB434;
				}
			}
		}
	}
</style>
